<h2>Appointment overview</h2>

    <table class="scrollTable">
        <thead>
            <tr>
                <th>Date & time</th>
                <th>Partner</th>
                <th>Location</th>
                <th>Subject</th>
                <th>Status</th>
                <th>Who</th>
            </tr>
        </thead>
        <tbody>
            <tr><td>2011-06-23 15:30</td><td>University Utrecht</td><td>Starbucks Central Station</td><td>Sponsorship</td><td>Accepted</td><td>Gijsbert van Dalen</td></tr>
            <tr><td>2011-06-25 11:00</td><td>Erasmus University</td><td>Bachstraat 23, Rotterdam</td><td>Partnership</td><td>Pending</td><td>Gijsbert van Dalen</td></tr>
            <tr><td>2011-06-25 14:30</td><td>HRO University of Applied Sciences</td><td>Aboutaleblaan 1, Rotterdam</td><td>Sponsorship</td><td>Pending</td><td>Gijsbert van Dalen</td></tr>
            <tr><td>2011-06-22 10:00</td><td>SSH Utrecht</td><td>Padualaan 8, Utrecht</td><td>Sponsorship</td><td>Pending</td><td>Gijsbert van Dalen</td></tr>
            <tr><td>2011-06-22 16:00</td><td>VU Amsterdam</td><td>Office 12 Turnlaan 12, Amsterdam</td><td>The international student</td><td>Pending</td><td>Gijsbert van Dalen</td></tr>
        </tbody>
    </table>
    <script type="text/javascript">
        //$('.scrollTable').dataTable({ "sAjaxSource": base_url+"index.php/portal/getAppointments", "sPaginationType": "full_numbers", "bRetrieve": true });
        $('.scrollTable').dataTable({ "sPaginationType": "full_numbers", "bRetrieve": true });
    </script>
    <input type="button" name="addAppointment" class="button" value="Add" id="showAddAppointmentForm" onclick="showForm();" style="float:right;"/>
    <div class="addAppointmentForm">
        <form style="display: none;">
            <div class="appointmentField">
                <label>Subject:</label>
                <input type="text" name="subject" id="appointmentSubject">

                <label>Location:</label>
                <input type="text" name="location" id="appointmentLocation">
            </div>

            <div class="appointmentField">
                <label>Date & time:</label>
                <input type="text" name="date" id="appointmentDateTime">
            </div>

            <div class="appointmentField">
                <label>Status:</label>
                <select name="status_id" id="appointmentStatus">
                    <option value="1">Accepted</option>
                    <option value="2">Cancelled</option>
                    <option value="3">Pending</option>
                </select>
            </div>

            <div class="appointmentField">
                <label>Description:</label>
                <textarea cols="5" rows="6" name="description" class="textArea" id="appointmentDesc"></textarea>
            </div>

            <div class="appointmentInvite">
                <label>Invite:</label>
                <select name="appointmentInvite" id="appointmentInvite">
                    <option value="1">Jan Jansen</option>
                    <option value="2">Wesley Verhoek</option>
                    <option value="3">Maarten Stekelenburg</option>
                </select>
                <input type="button" class="button" name="appointmentAddInvite" value="+"/>

            </div>

            <div class="errorSmall"></div> 
            <div class="successSmall"></div>
        
        <div class="formButton">
            <input type="button" class="button" name="cancelAddAppointment" id="hideAddAppointmentForm" value="Cancel" onclick="hideForm()"/>
            <input type="submit" class="button" name="addAppointment" id="addAppointment" value="Save"/>
            <script type="text/javascript">
                $('#addAppointment').click(addAppointment());
            </script>
        </div>
            </form>
    </div>
    